.DOCXin..DOCXout.
Open-source WYSIWYG .docx editor for React and Vue with canonical OOXML, tracked changes, and real-time collaboration.
DOCX Editor for React and Vue 3: Open Source DOCX Editor JS Component. Edit Word Documents in the Browser.
Features
Edit .docx documents in the browser. No server, no plugins, just JavaScript.
Realtime Collaboration
Sync edits, comments, and tracked changes across browsers with Yjs. Live cursors, presence, and conflict-free merging. Works with y-webrtc, PartyKit, or any Yjs provider.
Tracked Changes
Suggesting mode wraps every edit in revision markup. Renders insertions and deletions with author attribution. Accept or reject changes via the sidebar.
Comments
Threaded document comments anchored to text ranges. Add, reply, resolve, and delete comments, just like in Microsoft Word.
Word Fidelity
Pixel-perfect OOXML rendering: fonts, colors, bold, italic, highlights, plus inline and floating images with positioning and text wrap. Round-trips your .docx without quality loss.
Templates
Variable insertion system for document templates. Define placeholders and fill them programmatically or through a built-in panel.
React + Vue
Build with React or Vue 3. The same <DocxEditor>, same props, parity tested across both. Vue ships in beta.
Plugin System
Extensible architecture with ProseMirror plugins. Add custom toolbar actions, keyboard shortcuts, and document transformations.
Translations (i18n)
Built-in internationalization for any language. Localize every toolbar label, tooltip, and UI string. Community contributions welcome.
.docx edited by AGENTS.
Word-JS-API-shaped bridge for AI. Comment, suggest tracked changes, batch LLM output. Live in the editor or headless on the server. Vercel AI SDK and MCP ready.
import { DocxEditor } from '@eigenpal/docx-editor-react'; import { useDocxAgentTools } from '@eigenpal/docx-editor-agents/react'; import { useChat } from '@ai-sdk/react'; // 1. Wire agent tools to the live editor const { executeToolCall, getContext } = useDocxAgentTools({ editorRef, author: 'Assistant', }); // 2. Stream tokens, run tool calls in the browser const chat = useChat({ api: '/api/agent-chat', onToolCall: ({ toolCall }) => executeToolCall(toolCall.toolName, toolCall.input), }); // 3. Render: editor + agent panel side by side <DocxEditor ref={editorRef} documentBuffer={buf} agentPanel={{ render: () => <AgentChatLog ... /> }} /> // Headless? Swap useDocxAgentTools for DocxReviewer.fromBuffer().
Get Started
Add a full-featured DOCX editor to your React or Vue app with just a few lines of code.
import { useRef } from 'react';
import { DocxEditor, type DocxEditorRef } from '@eigenpal/docx-editor-react';
import '@eigenpal/docx-editor-react/styles.css';
function Editor({ file }: { file: ArrayBuffer }) {
const editorRef = useRef<DocxEditorRef>(null);
const handleSave = async () => {
const buffer = await editorRef.current?.save();
if (buffer) {
await fetch('/api/documents/1', { method: 'PUT', body: buffer });
}
};
return (
<>
<button onClick={handleSave}>Save</button>
<DocxEditor ref={editorRef} documentBuffer={file} />
</>
);
}<script setup lang="ts">
import { useTemplateRef } from 'vue';
import { DocxEditor, type DocxEditorRef } from '@eigenpal/docx-editor-vue';
import '@eigenpal/docx-editor-vue/styles.css';
const props = defineProps<{ file: ArrayBuffer }>();
const editorRef = useTemplateRef<DocxEditorRef>('editor');
const handleSave = async () => {
const buffer = await editorRef.value?.save();
if (buffer) {
await fetch('/api/documents/1', { method: 'PUT', body: buffer });
}
};
</script>
<template>
<button @click="handleSave">Save</button>
<DocxEditor ref="editor" :document-buffer="file" />
</template>Your Stack
Framework examples with full source code to get you started.
Vite
Fast development with HMR and optimized builds.
View example →Next.js
Server-side rendering with dynamic imports.
View example →Remix
Client-side rendering with lazy loading.
View example →Astro
Island architecture with client:only directive.
View example →Vue
BetaVue 3 adapter. Same surface as React.
View example →Nuxt
BetaNuxt 3 & 4 module. Auto-imported, SSR-safe.
View example →FAQ
docx-editor is an open-source WYSIWYG document editor for React and Vue 3 that lets you edit .docx files directly in the browser. It parses and renders OOXML documents with full fidelity, including tables, images, headers, footers, and formatting. No server-side processing required.
Yes. docx-editor is released under the Apache 2.0 license. You can use it in personal and commercial projects, modify the source code, and distribute it freely. There are no usage limits, watermarks, or premium tiers.
docx-editor has adapters for React and Vue 3. Same component name, same props, same hooks (called composables in Vue), same plugin contract. The React adapter works with Vite, Next.js, Remix, Astro, and anything else that runs React. The Vue adapter works with Vite and Nuxt. The repository has runnable examples for each framework.
The 0.x monolith at @eigenpal/docx-js-editor is in archive mode. New work lands in the 1.x packages: @eigenpal/docx-editor-react, -vue, -core, -agents, -i18n. Same code, split along package boundaries. The codemod for the upgrade is a single find-replace; the migration guide has the full path including the moved-symbol map.
Yes. @eigenpal/docx-editor-vue is a published adapter as of 1.0 (currently in beta). It mirrors the React surface one-to-one and is parity-tested in CI, so any feature documented for React works in Vue too. Install with npm install @eigenpal/docx-editor-vue, import <DocxEditor>, pass :document-buffer. Done.
You can install both @eigenpal/docx-editor-react and @eigenpal/docx-editor-vue side by side. They share the same @eigenpal/docx-editor-core foundation (deduplicated by your package manager), so you don't pay the OOXML parser twice. Document buffers move between them without conversion.
Yes. @eigenpal/docx-editor-vue works in Nuxt 3. Mount <DocxEditor> inside <ClientOnly> because ProseMirror reads DOM measurements at hydration; the rest of the page can still SSR. Per-locale i18n imports code-split correctly under Nuxt's Vite build.
Yes. @eigenpal/docx-editor-react works in Next.js App Router and Pages Router. The component is client-only (ProseMirror needs the DOM at mount), so wrap with 'use client' or next/dynamic with ssr: false. Tracked changes, comments, realtime collab, and the agent toolkit all run in the browser. See the Next.js post on the blog for a full walkthrough.
No. Everything runs client-side: parsing, rendering, editing. Zero backend dependencies. Just install the package, pass a buffer, and you have a working editor. No infra to maintain.
Yes. The live editor at /editor runs the same @eigenpal/docx-editor-react build you'd install locally. Open a .docx, edit, save back, all client-side. Add ?collaborate=1 for a multi-user room, ?agent=roastmaster to see the agent toolkit in action.
Yes. Bind DocxEditor to a Yjs document to get live multi-user editing: shared cursors, presence, and comment sync. You pick the provider (y-webrtc for zero infra, or PartyKit, Liveblocks, Hocuspocus for production). See the Realtime Collaboration docs for a 30-second setup.
Yes. Insertions and deletions are captured as ProseMirror marks with author attribution, and you can accept or reject them individually or in bulk via the toolbar. Tracked changes sync across collaborators once you wire up Yjs. No extra config.
Yes. Select text, leave a threaded comment, reply, and resolve. All stored as controlled state via the comments and onCommentsChange props. Mirror that state to a Y.Array on the same Y.Doc and comments sync live across every connected user alongside the document content.
Yes. docx-editor includes built-in i18n that supports any language. Import a locale and pass it via the i18n prop to localize every toolbar label, tooltip, and UI string. Community contributions for new locales are welcome; see the translations docs for how to contribute.